<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-05-22 09:59:00
 * @Descripttion: 实时数据分析
--> 
<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="企业名称">
        <el-input v-model="formInline.user" placeholder="请输入企业名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜 索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="companyName" label="企业名单">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.companyName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="areaName" label="区域">
      </el-table-column>
      <el-table-column prop="householdsNum" label="终端数量">
      </el-table-column>
      <el-table-column prop="kva" label="变压器容量（KVA）">
      </el-table-column>
      <!-- <el-table-column prop="max" label="最大需量">
      </el-table-column> -->
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableTotal"
    ></el-pagination>
  </div>
</template>
<script>
  import { apiGetDeptExt } from "../../../api/customerfiles/deptExt";

  export default {
    data() {
      return {
        tableData: [],
        tableTotal: 0,
        pageIndex: 1,
        pageSize: 10,
        formInline: {
          user: ''
        }
      }
    },
    created() {
      this.getDeptExt()
    },
    methods: {
      getDeptExt(){
        let paramObj = { 
          deptExtName: this.formInline.user, 
          page: this.pageIndex,
          size: this.pageSize }
        apiGetDeptExt(paramObj)
        .then(res => {
          let dataList = res.content;
          let newDataList = [];
          if (dataList.length > 0) {
            dataList.forEach(element => {
              newDataList.push({ 
                id: element.id,
                deptId: element.deptId,
                companyName: element.name,
                areaName: element.deptArea,
                householdsNum: element.households == null ? 0 : element.households.length,
                kva: element.sumTransformerCapacity,
                max: ''
              });
            });
          }
          this.tableData = newDataList;
          this.tableTotal = res.totalElements;
        })
        .catch(error => {
          console.log(error);
        });
      },
      onSubmit() {
        this.getDeptExt();
      },
      handleClick(row) {
        console.log(row);
        this.$router.push({path:'/electricitysales/realTimeData',query:{deptId:row.deptId}})
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
      }
    }
  }
</script>
